<template>
  <view>
    <u-navbar title="账单记录" :autoBack="true" :bgColor="bgColor"></u-navbar>
    <view class="main">
      <view class="billing-top">
        <image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/back.png" mode=""></image>
        <view class="billing-top-con">
          <view class="fontsize14">余额（金币）</view>
          <view class="fontsize26 fontw margintop10">¥{{ money || 0 }}</view>
        </view>
      </view>
      <view class="billing-record"> 账单记录</view>
      <view v-if="MoneyRecordList.length > 0">
        <view class="flexrow flexbetween billing-list" v-for="(item, index) in MoneyRecordList" :key="index">
          <view>
            <view class="fontsize14">{{ typetoname(item.changetype) }}</view>
            <view class="fontsize12 color999 marginTop4">{{
              item.createDate || "-"
            }}</view>
          </view>
          <view class="fontsize14 color333 fontw">¥ {{ item.changeMoney || 0 }}</view>
        </view>
        <!-- <view class="flexrow flexbetween billing-list">
					<view>
						<view class="fontsize14">上门治疗</view>
						<view class="fontsize12 color999 marginTop4">2022-02-02 12：00</view>
					</view>
					<view class="fontsize14 color333 fontw">¥ 1000.00</view>
				</view>
				<view class="flexrow flexbetween billing-list">
					<view>
						<view class="fontsize14">辅料清单</view>
						<view class="fontsize12 color999 marginTop4">2022-02-02 12：00</view>
					</view>
					<view class="fontsize14 color333 fontw">¥ 1000.00</view>
				</view> -->
      </view>
      <lack v-if="MoneyRecordList.length == 0"></lack>
      <view style="padding-bottom: 20rpx">
        <u-loadmore :status="status" v-if="MoneyRecordList.length > 0 && blackFlage" />
      </view>
    </view>
  </view>
</template>

<script>
import { getMoneyRecord } from '../../api/index.js'
import Lack from "@/chronicDisease/components/lack/lack.vue";

export default {

  components: {
    Lack
  }, data() {
    return {
      bgColor: "rgba(0,0,0,0)",
      moneyquery: {
        pageNumber: 1,//	必选	Integer	页数
        pageSize: 10,//	必选	Integer	每页显示的数量
      },
      MoneyRecordList: [],
      blackFlage: false,
      status: 'nomore',
      money: 0
    };
  },
  onLoad(options) {
    this.money = options.money
    this.MoneyRecordList = []
    this.moneyquery.pageNumber = 1
    this._getMoneyRecord()
  },
  onReachBottom() {
    if (this.blackFlage) {
      return;
    }
    this.moneyquery.pageNumber = this.moneyquery.pageNumber + 1;
    this._getMoneyRecord()
  },
  methods: {
    //类型转换
    typetoname(val) {
      let name = ''
      switch (val) {
        case '2.0':
          name = '问诊订单支付'
          break;
        case '2.1':
          name = '上门订单支付'
          break;
        case '2.2':
          name = '辅料订单支付'
          break;
        default:
          name = '-'
          break;
      }
      return name
    },
    _getMoneyRecord() {
      getMoneyRecord(this.moneyquery).then(res => {
        if (res.data.records.length == 0 && this.moneyquery.pageNumber != 1) {
          this.blackFlage = true
          return
        }
        this.MoneyRecordList = this.MoneyRecordList.concat(res.data.records)
      })
    },

  },
};
</script>

<style lang="scss">
.main {
  height: 320rpx;
  background: linear-gradient(0deg, #ffffff 0%, #cce7ff 100%);
  padding: 164rpx 40rpx 0 40rpx;

  .billing-top {
    position: relative;

    image {
      width: 100%;
      height: 220rpx;
    }

    .billing-top-con {
      position: absolute;
      top: 0;
      padding: 46rpx 40rpx;
      color: #fff;

      .fontsize26 {
        font-size: 52rpx;
      }

      .margintop10 {
        margin-top: 20rpx;
      }
    }
  }

  .billing-record {
    border-bottom: 2rpx solid #f7f7f7;
    height: 88rpx;
    line-height: 88rpx;
    margin-top: 28rpx;
  }

  .billing-list {
    height: 128rpx;
    border-bottom: 2rpx solid #f7f7f7;
  }
}
</style>
